<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="path" value="${pageContext.request.contextPath }"/>
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix" %>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms" %>
<cms:ads
        code="'ej388c5071eba743c5922ebd6fd71da8a4','bSbf4aac7f6993493bb0afd95d3c0f37b3','TK5e80ea600b284949800ba43ddfd9f40e','YB234d2bdd7f404a5e9bde8a4e420e040b','ypf6e5747f4cca45a7ba5263ab9ea14db4','Zkf7e79cdd28774c29a4373b0fedc29218','Ore0febb32d536486d933c09f631dbd8f8','xobf215a4d0cd7492d8055817cf8d1eef0'"></cms:ads>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=yes">
    <meta http-equiv="x-rim-auto-match" content="none">
    <link rel="stylesheet" href="http://www.joffre-jewelry.com/resource/plugin/mui/css/mui.min.css">
    <link href="http://hwfile.jyymatrix.cc/public/css/reset.css" rel="stylesheet">
    <link href="http://at.alicdn.com/t/font_952431_uhchhvqlyei.css" rel="stylesheet">
    <link href="http://hwfile.jyymatrix.cc/joffre/mobile/css/common.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css">
    <link rel="icon" sizes="any" href="${浏览器logo}">
    <title>选购${网页标题}</title>
    <style>#box img {
        float: left;
        width: 100%;
    }</style>
    <meta name="keywords" content="${网页关键词}">
    <meta name="description" content="${网页描述 }">
    <style>


        .select label {
            color: #7e7e7e;
            font-size: 16px;
            padding-left: 13px;
            min-width: 85px;
        }

        .selectBox {
            width: 50%;
            position: relative;
            float: left;
        }

        .select {
            width: 120px;
            height: 30px;
            border-radius: 5px;
            border: 1px solid #e5e5e5;
            line-height: 30px;
            background-image: url('http://hwfile.jyymatrix.cc/joffre/images/xl.jpg');
            background-repeat: no-repeat;
            background-position: right;
            cursor: pointer;
            display: inline-block;
            font-size: 10px;
            color: #7e7e7e;
        }

        .select label {
            color: #7e7e7e !important;
            font-size: 10px;
        }

        .option {
            width: 140px;
            border-radius: 5px;
            border: 1px solid #e5e5e7;
            background: #f1f2f6;
            padding: 4px 10px;
            position: absolute;
            left: 24px;
            display: none;
            font-size: 10px;
        }

        .option li {
            line-height: 30px;
            height: 30px;
            margin-top: 4px;
            cursor: pointer;
            vertical-align: middle;
        }

        .option li span:hover {
            color: #ada2b3;
        }

        .option li img {
            vertical-align: middle;
            margin-right: 5px;
            width: 2em !important;
        }

        .doc {
            width: 10px !important;
            height: 10px !important;
            background: #83778c !important;
        }

        .mui-active {
            background: #baadc4 !important;
        }

        #bbb {
            position: fixed;
            z-index: 999;
            width: 100%;
            top: 84px;
            box-shadow: 1px 1px 5px #83778c;
            display: none;
        }
         #bbb2 {
                position: fixed;
    z-index: 999;
    top: 90px;
    right: 10px;
    font-size: 25px;
       display: none;
        }
    </style>
</head>
<body>
<jsp:include page="_top.jsp"></jsp:include>
<cms:pro var="pro" id="${param.id }" needSku="true"></cms:pro>
<img src="" id="bbb" alt="">
<i id="bbb2" class=" iconfont icon-close-circle" ></i>
<div id="box" style="padding:0px 5px;">
    <!--轮播图-->
    <div id="slider" class="mui-slider" style="margin-top:10px;">
        <div class="mui-slider-group">
            <c:forEach items="${pro.albums }" var="item">
                <div class="mui-slider-item">
                    <a href="#"> <img src="${item.img}" class="zy" data-type="pro" data-id="${pro.id}"></a>
                </div>
            </c:forEach>


        </div>
        <div class="mui-slider-indicator" style="    position: initial;margin-top: 10px;">
            <c:forEach items="${pro.albums }" varStatus="count" var="item">
                <div class="mui-indicator <c:if test="${count.index eq 0}   " >mui-active</c:if>  doc"></div>
            </c:forEach>

        </div>
    </div>
    <h1 style="line-height:60px;font-size:18px;color:#3b3b3b;" class="zy" data-type="pro"
        data-id="${pro.id}">${pro.name}</h1>
    <div style="height:50px;">

        <c:forEach items="${skuList }" var="parentSku" begin="0" end="0">
            <div class="selectBox">
                <cms:attr var="attr" code="js" needChild="true"></cms:attr>
                <label for="" class="zy" data-type="attr"
                       data-id="${parentSku.id}">${parentSku.attrName}</label>
                <div class="select">
                    <label class="zy" data-type="ad"
                           data-id="${uPb17282bf89fa480f8d8157e3e10eeaf5.adId}">${uPb17282bf89fa480f8d8157e3e10eeaf5.adTitle}</label>
                </div>
                <div class="option">
                    <ul>
                        <c:forEach items="${parentSku.childs }" var="item">
                            <li><img src="${item.img}" class="zy" data-type="attr" data-id="${item.id}"><span
                                    class="zy" data-type="attr" data-id="${item.id}">${item.attrName}</span>
                            </li>
                        </c:forEach>
                    </ul>
                </div>
            </div>
        </c:forEach>

        <c:forEach items="${skuList }" var="parentSku" begin="1" end="1">
            <div class="selectBox">
                <cms:attr var="attr" code="ss" needChild="true"></cms:attr>
                <label for="" class="zy" data-type="attr"
                       data-id="${parentSku.id}">${parentSku.attrName}</label>
                <div class="select">
                    <label class="zy" data-type="ad"
                           data-id="${dDf6c5a769ed0a487c95169e0c6b8620e1.adId}">${dDf6c5a769ed0a487c95169e0c6b8620e1.adTitle}</label>
                </div>
                <div class="option">
                    <ul>
                        <c:forEach items="${parentSku.childs}" var="item">
                            <li  style="height: 20px; line-height: 18px;"  ><img src="${item.img}" class="zy" data-type="attr" style="    margin-top: 8px;"
                                     data-id="${item.id}"><span
                                    class="zy" data-type="attr" data-id="${item.id}">${item.attrName}</span>
                            </li>
                        </c:forEach>
                    </ul>
                </div>
            </div>
        </c:forEach>
    </div>

    <div style="vertical-align: middle;display: flex;">
        <label style="line-height:40px;margin-right:20px;" class="zy" data-type="ad"
               data-id="${ypf6e5747f4cca45a7ba5263ab9ea14db4.adId}">${ypf6e5747f4cca45a7ba5263ab9ea14db4.adTitle}</label>
        <a href="${pro.tianmao }" target="blank"><img style="margin-right:17px;width:35px;height:35px;"
                                                      src="${Zkf7e79cdd28774c29a4373b0fedc29218.adImg}" alt=""
                                                      class="zy" data-type="ad"
                                                      data-id="${Zkf7e79cdd28774c29a4373b0fedc29218.adId}"></a>
        <a href="${pro.jd }" target="blank"><img style="width:35px;height:35px;"
                                                 src="${Ore0febb32d536486d933c09f631dbd8f8.adImg}" alt="" class="zy"
                                                 data-type="ad" data-id="${Ore0febb32d536486d933c09f631dbd8f8.adId}">
        </a>
    </div>
    <div style="background: #aca3b2;height:35px;width:100%;margin-top:40px;">
        <h1 style="font-size:14px;color:#fff;line-height:35px;text-indent: 14px;" class="zy" data-type="ad"
            data-id="${xobf215a4d0cd7492d8055817cf8d1eef0.adId}">${xobf215a4d0cd7492d8055817cf8d1eef0.adTitle}</h1>
    </div>
    <div style="margin-top:8px;width:100%;overflow:hidden;">

        ${pro.description }

    </div>

</div>


<jsp:include page="_footer.jsp"></jsp:include>
<script src="http://hwfile.jyymatrix.cc/public/js/jquery.min.js"></script>
<script src="http://www.joffre-jewelry.com/resource/plugin/mui/js/mui.js"></script>
<script src="http://hwfile.jyymatrix.cc/joffre/mobile/js/accordion.js"></script>
<script>

    function changeImg(node) {
        var _this = $(node);
        $("#showbox").find("img").attr("src", _this.val());
    }


    /**
     初始化下拉框效果
     **/
    $(".selectBox").each(function () {

        $box = $(this);
        var option = $box.find(".option");
        var select = $box.find(".select");
        var label = select.find("label");

        select.click(function () {
            console.log(option.html());
            option.toggle();
        });

        option.mouseleave(function () {
            console.log("out");
            option.hide();
        });

        $box.find("li").each(function () {
            $li = $(this);

            $li.click(function () {
                option.hide();
                var span = $(this).find("span");
                label.text(span.text());
                label.data("sku", span.data("id"));
                console.log(span.data("id"));
                findImg();
            });
        });


    });


    //所有的sku
    var skusImgsJson = JSON.parse('${skusImgsJson}');
    function findImg() {
        console.log("查询sku");
        if (skusImgsJson.length > 0) {
            var ids = [];
            //取出lable中绑定的id
            var labels = $(".select").find("label");
            var s1 = "";
            var s2 = ""
            if (labels.length == 1) {
                var sku0 = $(labels.eq(0)).data("sku");
                s1 = "-," + sku0;
                s2 = sku0 + ",-";
            } else {
                var sku0 = $(labels.eq(0)).data("sku");
                var sku1 = $(labels.eq(1)).data("sku");
                s1 = sku0 + "," + sku1;
                s2 = sku1 + "," + sku0;
            }
            for (var j = 0; j < skusImgsJson.length; j++) {
                var attrId = skusImgsJson[j].attrId;
                if (attrId == s1 || attrId == s2) {
                    console.log("命中", skusImgsJson[j]);
                    $("#bbb").attr("src", skusImgsJson[j].img);
                    $("#bbb").show();
                    $("#bbb2").show();
                    $("#slider").css("visibility","hidden");
                }

            }
        }
    }
    $("#bbb").click(function () {
        $(this).hide();
        $("#bbb2").hide();
        $("#slider").css("visibility","visible");
    });
    $("#bbb2").click(function () {
        $(this).hide();
        $("#bbb").hide();
        $("#slider").css("visibility","visible");
    });

</script>
</body>
</html>